<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
            height: 150px;
            position: absolute;
            top: 0;
            left:0;
            cursor:zoom-in;
        }
        .box{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            /* z-index: 10; */
            background-color: #000000;
            /* background-color:rgba(0,0,0,.3);
            display: none; */
            visibility: hidden;
            /* opacity: .3; */
        
        }
    </style>
</head>
<body>
    <img src="./images/img.jpg" alt="">
    <div class="box"></div>
</body>
<script>
    var img=document.querySelector('img')
    var box=document.querySelector(".box")
    var flag=false
    img.onclick=()=>{
        // console.log('2222')
        flag=!flag
        console.log(flag)
        if(flag===true){
            img.style.cssText="height:300px;width:600px;transition:all,1s;position:absolute;top:40%;left:30%;z-index:20;cursor:zoom-out"
        box.style.cssText="visibility:visible;opacity:.3;transition:all,1s;cursor:zoom-out"

        box.onclick=()=>{
            // console.log(222)
            img.style.cssText="height:150px;width:300px;transition:all,1s;position:absolute;top:0;left:0;z-index:1"
        box.style.cssText="visibility:hidden;transition:all,1s"
        flag=false
        }
        }else{
            img.style.cssText="height:150px;width:300px;transition:all,1s;position:absolute;top:0;left:0;z-index:1"
        box.style.cssText="visibility:hidden;transition:all,1s"
        }
        
        
    }
</script>
</html>